<template>
  <div class="m-input">
    <input
      class="m-input__inner"
      v-model="state.val"
      @input="handleInput"
      @focus="handleFocus"
      @blur="handleBlur"
      @change="handleChange"
    />
  </div>
</template>

<script setup>
import { reactive, watch } from 'vue'

const props = defineProps({
  value: String
})
const emits = defineEmits(['update:value', 'blur', 'change', 'focus'])
const state = reactive({
  val: props.value
})

watch(
  () => props.value,
  (newVal) => {
    state.val = newVal
  }
)

function handleInput() {
  emits('update:value', state.val)
  emits('change', state.val)
}
function handleFocus() {
  emits('update:value', state.val)
  emits('change', state.val)
}
function handleBlur() {
  emits('update:value', state.val)
  emits('change', state.val)
}
function handleChange() {
  emits('update:value', state.val)
  emits('change', state.val)
}
</script>
